<template>
	<coreshop-page title="店铺" mode="left">

		<view class="layout-store-box">
			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="false">
					<swiper-item v-for="item,index in state.bannerList" :key="index">
						<image class="img" :src="item" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<!-- <uv-swiper :list="state.bannerList" height="400rpx"></uv-swiper> -->
			</view>
			<view class="actions">
				<view class="item logo_box">
					<image class="logo_image" mode="aspectFill"
						:src="state.storeInfo?.storeLogo || handleStaticResources('/static/images/common/empty.png')">
					</image>
				</view>
				<view class="item line">
					<view class="value">{{state.totalCount}}</view>
					<view class="label">全部宝贝</view>
				</view>
				<view class="item line">
					<view class="value">
						<uv-icon name="star" :size="20"></uv-icon>
					</view>
					<view class="label">收藏本店</view>
				</view>
				<view class="item line" @click="handleCreatePoster">
					<view class="value">
						<uv-icon name="order" :size="20"></uv-icon>
					</view>
					<view class="label">二维码</view>
				</view>
			</view>
			<view class="list">
				<view class="search-box">
					<uv-input shape="circle" placeholder="请输入关键词" prefixIcon="search"
						:customStyle="{ 'background-color': '#fff' }" @confirm="handleSearch" @focus="handleSearch"
						prefixIconStyle="font-size: 22px;color: #909399">
						<template #suffix>
							<view class="search-tit" @click.stop="handleSearch">搜索</view>
						</template>
					</uv-input>
				</view>
				<view class="products">
					<view v-for="cell, cellIndex in state.goodsList" :key="cellIndex" class="waterfall-box">
						<view v-for="item, index in cell" :key="index" class="card-box">
							<coreshop-goods-card type="vertical" imgHeight="310rpx" imgWidth="310rpx"
								:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
								<template #goodPrice>
									<view class="price-msg" @click="hanldeClickGoods(item)">
										<view class="price-box">
											<view class="price">
												<text class="symbol">￥</text>
												<text class="num">{{ item.price }}</text>
												<text class="mktprice" v-if="item.mktprice">￥{{ item.mktprice }}</text>
											</view>
											<view class="buyCount">已售{{ item.buyCount }}{{ item.unit }}</view>
										</view>
									</view>
								</template>
							</coreshop-goods-card>
						</view>
					</view>
				</view>
				<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
			</view>
		</view>

	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { queryDistributionStoreInfo, queryShare, queryGoodsPageList } from '@/core/api';
	import { handleStaticResources, splitArrayByStep, handleShowToast, handleRouteNavigateTo, getShareUrl } from '@/core/utils';
	import type { Response, GoodsType } from '@/core/models';
	import { ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';
	import { shareUrl, UserToken } from '@/core/consts';
	import { useShopConfigStore } from '@/core/store';
	import { queryParams } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

	interface QueryParams {
		store : number;
	}

	// 获取项目配置
	const shopConfigStore = useShopConfigStore();

	const state = reactive<{
		page : number;
		limit : number;
		totalPages : number;
		totalCount : number;
		goodsList : any;
		storeId : number;
		storeInfo : any;
		shareUrl : string;
		bannerList : Array<string>;
	}>({
		page: 1,
		limit: 20,
		totalPages: 1,
		totalCount: 0,
		goodsList: [[], []],
		storeId: 0,
		storeInfo: {},
		shareUrl: "",
		bannerList: [],
	})

	onLoad(async (query : QueryParams) => {
		state.storeId = query.store;
		getDistributionInfo();
		getGoodsPageList();

		state.shareUrl = await getShareUrl({
			client: ShareClientEnum.wxMiNiProgram,
			url: shareUrl,
			type: ShareModelEnum.url,
			page: ShareEnum.inv,
			params: {
				store: state.storeId
			}
		})
	})

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getGoodsPageList();
		}
	})

	/** 获取商品列表 */
	const getGoodsPageList = async () => {
		const goodsPage : Response<any> = await queryGoodsPageList({
			page: state.page,
			limit: 10,
		})
		if (goodsPage.status) {
			state.totalPages = goodsPage.data?.totalPages;
			state.totalCount = goodsPage.data?.totalCount;
			state.goodsList[0] = state.goodsList[0].concat(splitArrayByStep(goodsPage.data?.list, 2)[0])
			state.goodsList[1] = state.goodsList[1].concat(splitArrayByStep(goodsPage.data?.list, 2)[1])
		}
	}

	// 组合商品数据传入组件
	const hanldeCombinationGoodsData = (item : GoodsType) => {
		return {
			id: item.id,
			image: item.image,
			name: item.name,
			brief: item.brief,
			price: item.price,
			mktprice: item.mktprice,
			isRecommend: item.isRecommend,
			isHot: item.isHot,
		}
	}

	const hanldeClickGoods = (item : GoodsType) => {
		uni.navigateTo({
			url: `/pages/goods/detail?id=${item.id}`
		})
	}

	/** 获取分销商进度状态 */
	const getDistributionInfo = async () => {
		const info : Response<any> = await queryDistributionStoreInfo({
			id: state.storeId
		});
		if (info.status) {
			state.storeInfo = info.data;
			state.bannerList = info.data?.storeBanner ? info.data?.storeBanner.split(',') : [`${handleStaticResources('/static/images/common/empty-banner.png')}`];
		} else {
			handleShowToast(info.msg)
		}
	}

	/** 搜索 */
	const handleSearch = () => {
		handleRouteNavigateTo(`/pages/search/search`);
	}

	/** 生成海报 */
	const handleCreatePoster = async () => {
		let data : any = {
			client: ShareClientEnum.wxMiNiProgram,
			url: shareUrl,
			type: ShareModelEnum.poster,
			page: ShareEnum.inv,
			params: {
				store: state.storeId
			}
		}
		if (uni.getStorageSync(UserToken)) {
			data['token'] = uni.getStorageSync(UserToken)
		}
		const share = await queryShare(data);
		if (share.status) {
			data.params.posterUrl = share.data;
			data.params.shareType = ShareEnum.inv;
			handleRouteNavigateTo(`/pages/share/sharePoster/sharePoster` + queryParams(data.params));
		} else {
			handleShowToast(share.msg);
		}
	}

	/** 分享 */
	onShareAppMessage(() => {
		return {
			title: state.storeInfo?.storeName ? state.storeInfo?.storeName : shopConfigStore.config.shareTitle,
			imageUrl: state.storeInfo?.storeLogo ? state.storeInfo?.storeLogo : shopConfigStore.config.shareImage,
			path: state.shareUrl
		}
	});
	onShareTimeline(() => {
		return {
			title: state.storeInfo?.storeName ? state.storeInfo?.storeName : shopConfigStore.config.shareTitle,
			imageUrl: state.storeInfo?.storeLogo ? state.storeInfo?.storeLogo : shopConfigStore.config.shareImage,
			path: state.shareUrl
		}
	});
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>